<template>
  <div class="login-form">
    <n-form
      ref="formRef"
      label-placement="left"
      size="large"
      :model="formInline"
      :rules="rules"
    >
      <n-form-item path="passport">
        <n-input v-model:value="formInline.passport" placeholder="请输入用户名">
          <template #prefix>
            <n-icon size="18" color="#808695">
              <PersonOutline />
            </n-icon>
          </template>
        </n-input>
      </n-form-item>
      <n-form-item path="password">
        <n-input
          v-model:value="formInline.password"
          type="password"
          showPasswordOn="click"
          placeholder="请输入密码"
        >
          <template #prefix>
            <n-icon size="18" color="#808695">
              <LockClosedOutline />
            </n-icon>
          </template>
        </n-input>
      </n-form-item>
      <n-form-item>
        <n-button
          type="primary"
          @click="handleSubmit"
          size="large"
          :loading="loading"
          block
        >
          登录
        </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup>
import { login } from '@/api/admin/login'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { useMessage } from 'naive-ui'
import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
const router = useRouter()
const userStore = useUserStore()
// console.log(useUserStore())
const formRef = ref()
const message = useMessage()
const loading = ref(false)
const formInline = reactive({
  passport: 'admin',
  password: '123456',
})
const rules = {
  passport: { required: true, message: '请输入账号', trigger: 'blur' },
  password: { required: true, message: '请输入密码', trigger: 'blur' },
}
const handleSubmit = (e) => {
  e.preventDefault()
  formRef.value.validate(async (errors) => {
    if (!errors) {
      message.loading('登录中...')
      loading.value = true

      const params = {
        passport: formInline.passport,
        password: formInline.password,
      }

      const res = await login(params)
      console.log(res)
      if (res.code === 200) {
        message.success('登录成功！')
        userStore.setToken(res.data)
        userStore.setAdmin()
        // router.push({name: 'dashbord'})
      } else {
        message.info(res.message || '登录失败')
      }
    } else {
      message.error('请填写完整信息，并且进行验证码校验')
    }
  })
}
</script>

<style></style>
